<!-- 首页文件 -->
<script setup>
// import { useRoute } from "vue-router";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { ref, onBeforeMount, onActivated } from "vue";

// const定义的常量不能够修改，但let定义的变量可以，const定义的响应式变量const name = ref("zhang")修改的是name.value而不是name本身
let path = "/home/news";

const router = useRouter();
const route = useRoute();
// console.log(route.params);
// const params = route.params;
// watch(params, () => {
// 	console.log("params are changed");
// 	console.log(params);
// });

onBeforeMount(() => {
	console.log("首页文件已经创建，但未挂载");
});

// 当前路由激活时调用。激活函数activated和失活函数deactivated只有在该组件被保持状态使用了keep-alive时，才是有效的
onActivated(() => {
	console.log("Home激活函数");
	router.push(path);
});
// 路由跳转前调用
onBeforeRouteLeave((to, from, next) => {
	console.log(route.path);
	path = route.path;
	next();
});
</script>

<template>
	<div class="home">
		<h1>我是Home</h1>
		<!-- 定义路由链接 router-link -->
		<router-link to="/home/news">新闻</router-link>
		<router-link to="/home/message">消息</router-link>

		<!-- 调用子路由，需要确定一个router-link渲染的地方 -->
		<router-view></router-view>
	</div>
</template>

<style scoped>
/* scoped表示旨在本文件内起作用，局部声明 */
</style>
